<template>
    <div class="m-blogs">
     <Header></Header>

      <div class="block">
        <el-timeline>
          <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
            <el-card>
              <h4>
                <!--连接跳转-->
                <router-link :to="{name: 'BlogDetail', params: {blogId: blog.id}}">
                {{blog.title}}
                </router-link>
              </h4>
              <p>{{blog.description}}</p>
              <!--<el-row class="m-btn">-->
              <!--<el-button type="success" @click="toedit(blog.id)" >编辑</el-button>-->
               <!--</el-row>-->
            </el-card>

          </el-timeline-item>

        </el-timeline>
      </div>
      <el-pagination class="mpage"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="page"
        :total="total">
      </el-pagination>
    </div>


</template>

<script>
  import Header from "../components/Header"
    export default {
        name: "Blogs",
      components: {Header},
      data(){
          return{
            blogs: {},
            currentPage: 1,
            total: 0,
            pageSize: 5,
          }
      },
      methods: {
          page(currentPage) {
            const that = this;
            this.$axios.get("/blog?currentPage="+ currentPage).then(res=>{

              that.blogs = res.data.data.records;
              that.currentPage = res.data.data.current;
              that.total = res.data.data.total;
              that.pageSize = res.data.data.size;
            })
          },
        toedit (id){
        // console.log(this.$route.params.blogId);
          this.$router.push("/Blog/"+id+"/edit")
        }
      },
      created() {
          this.page(1)
      }
    }
</script>

<style scoped>
  .m-blogs{
    max-width: 800px;
    margin: 0 auto;
  }
  .mpage{
    text-align: center;
    margin: 0 auto;
  }
  .m-btn{
    position: absolute;
    right: 30px;
    top: 50%;
  }
</style>
